<template>
  <view class="x-empty">
    <slot name="img">
      <image src="./data-empty.png" mode="aspectFit" :style="style"></image>
    </slot>
    <view class="x-empty_title">{{ title }}</view>
  </view>
</template>
<script setup lang="ts">
  import { computed } from "vue";

  defineOptions({
    name: "x-empty",
  });

  const props = defineProps({
    title: {
      type: String,
      default: "暂无数据",
    },
    width: {
      type: Number,
      default: 160,
      required: false,
    },
    height: {
      type: Number,
      default: 160,
      required: false,
    },
  });

  const style = computed(() => {
    return {
      width: props.width + "px",
      height: props.height + "px",
    };
  });
</script>
<style lang="scss" scoped>
  .x-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: fit-content;
  }
  .x-empty_title {
    font-size: 14px;
    color: rgb(192, 196, 204);
    text-align: center;
    margin-top: 6px;
  }
</style>
